
<g:render template="/home/header" ></g:render>

<script>
    var ajaxPhoto = function(max,offset,rank){
        if($("#maxId").attr("name")){
            return;
        }
        $("#maxId").attr("name",'request')
        $.ajax({
            type:"POST",
            url:"<g:createLink controller='photo' action='listDetails'/>",
            data:{max:max,offset:offset,json:1,name:rank},
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){

                $("#maxId").attr("name","");
                $('#maxId').val(data.max);
                $('#offsetId').val(data.offset);
                var d = data.photoList;
                var n = d.length;
                var j=0;
                var num = (data.offset == data.max) ? 1 : (data.offset - data.max + 1);
                for(var i = 0 ; i < n ; i++){
                    $(".flow").each(function() {
                        if (d[j]) {
                            var r = d[j]
                            var html = [];
                            html.push('<li id="contentU">');
                            var cren = (r.showShape == 2) ? 'pic_cent' : '';
                            if(num > 3){
                                html.push('<div class="rank"><div class="triangle2_1" id="triangle2"></div>' +num+ '</div>');
                                html.push('<div class="pic_tu1small '+ cren +'"><a href="../photo/show/'+ r.id+'"><div><img src="../' + r.smallImagePath + '"  border="0" ></div></a></div>');
                            }else if(num == 1){
                                html.push('<div class="rank rank1"><div class="triangle2_1" id="triangle2"></div>' +num+ '</div>');
                                html.push('<div class="pic_tu1big '+ cren +' "><a href="../photo/show/'+ r.id+'"><div><img src="../' + r.middleImagePath + '"  border="0"></div></a></div>');
                            }else if(num == 2){
                                html.push('<div class="rank rank2"><div class="triangle2_1" id="triangle2"></div>' +num+ '</div>');
                                html.push('<div class="pic_tu1big '+ cren +'"><a href="../photo/show/'+ r.id+'"><div><img src="../' + r.middleImagePath + '"  border="0" ></div></a></div>');
                            }else if(num == 3){
                                html.push('<div class="rank rank3"><div class="triangle2_1" id="triangle2"></div>' +num+ '</div>');
                                html.push('<div class="pic_tu1big '+ cren +'"><a href="../photo/show/'+ r.id+'"><div><img src="../' + r.middleImagePath + '"  border="0"></div></a></div>');
                            }

                            html.push('<div class="pic_sm11">');
                            html.push('<a href="../../photo/show/'+ r.id+'"><h5>作品名称&nbsp;' + r.name + '</h5> <p>作者：'+ r.username+'</p></a>');
                            html.push('<div class="favor">');
                            html.push('<ul>');
                            html.push('<li><span class="red">'+ r.laudNum + '</span>赞</li>');
                            html.push('<li> <span class="red">' + r.price + '</span>元</li>');
                            html.push('<li> 已售出<span class="red">' + r.saleNum + '</span>件</li>');
                            html.push('</ul>');
                            html.push('</div>');
                            html.push('</div>');
                            html.push('</li>');

                            $(this).append(html.join(' '));
                            j++;
                            num++;
                        }else{
                            $("#maxId").attr("name","request");
                        }
                    });
                }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });
    }
    $(document).ready(function(){
        //初始化数据
        ajaxPhoto(8,0,$('#rankId').val());
        $(window).scroll(function(){
            // 被卷去的高度
            var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
            // 页面高度
            var pageHeight = $(document).height();
            // 可视区域高度
            var viewHeight = $(window).height();
            //alert(viewHeight);
            //当滚动到底部时
            if((scrollTop+viewHeight)>(pageHeight-20)){
                ajaxPhoto($('#maxId').val(),$('#offsetId').val(),$('#rankId').val());
            }
        });
    });


</script>
<div class="wid_1200 mTo_20 upload">
    <g:render template="topNav" ></g:render>
    <!--中间-->
    <div class="blk3 load_blk_ying f_r load1">
        <!--排行榜详情-->
        <div class="s1_title mLe_20">
            <h3 class="f_l" style=" text-indent:0" id="title">
                <g:if test="${params.name == 'monthBestSell'}">本月畅销作品</g:if>
                <g:elseif test="${params.name == 'totalBestSell'}">累计畅销作品</g:elseif>
                <g:elseif test="${params.name == 'monthBestLaud'}">本月最受欢迎作品</g:elseif>
                <g:elseif test="${params.name == 'totalBestLaud'}">累计最受欢迎作品</g:elseif>
            </h3>
        </div>
        <input type="hidden" value="${max}" id="maxId" />
        <input type="hidden" value="${offset}" id="offsetId" />
        <input type="hidden" value="${rank}" id="rankId" />
        <div class="blk3_1" id="pic_con">
            <!--图图列表-->
            <ul class="pic11" >
                <div class="flow" ></div>
            </ul>
            <!--图图列表 end-->
        </div>

        <!--/排行榜详情-->
    </div>
</div>
<!--/主体-->
<g:render template="/home/footer" ></g:render>


%{--<p>--' + i + '--' + r.id + '--</p>--}%
